<template>
  <div class="goodsInfoBox">
    <x-header
      :left-options="{showBack: false,backText:''}"
      class="headerBox"
      :class="topFixed?'active':''"
    >
      <span v-if="topFixed">商品详情</span>
      <div slot="left" class="headLeft">
        <img v-if="!topFixed" src="../assets/images/nav-back.png" alt @click="goBack" />
        <img v-else src="../assets/images/nav-back2.png" alt @click="goBack" />
      </div>
      <div slot="right" class="headRight">
        <img v-if="!topFixed" src="../assets/images/nav-more.png" alt @click="menuNav=!menuNav" />
        <img v-else src="../assets/images/nav-more2.png" alt @click="menuNav=!menuNav" />
      </div>
    </x-header>
    <!-- 头部菜单弹框 -->
    <x-dialog
      v-model="menuNav"
      :dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}"
      class="menuNavBox"
    >
      <div class="closeBox">
        <img src="../assets/images/close-nav2.png" alt @click="menuNav=false" />
      </div>
      <div class="menuContent">
        <div class="menuTitle">快速导航</div>
        <div class="menuList clearfix">
          <router-link to="/" class="menuItem">
            <img src="../assets/images/nav-index.png" alt />
            <div>首页</div>
          </router-link>
          <router-link to="cart" class="menuItem">
            <img src="../assets/images/nav-cart.png" alt />
            <div>购物车</div>
          </router-link>
          <router-link to="search" class="menuItem">
            <img src="../assets/images/nav-search.png" alt />
            <div>搜索</div>
          </router-link>
          <router-link to="classify" class="menuItem">
            <img src="../assets/images/nav-cate.png" alt />
            <div>全部分类</div>
          </router-link>
          <router-link to="mine" class="menuItem">
            <img src="../assets/images/nav-my.png" alt />
            <div>我的易购</div>
          </router-link>
        </div>
      </div>
    </x-dialog>
    <div class="bannerBox">
      <swiper
        :list="bannerList"
        :index="swiperIndex"
        :show-dots="false"
        :aspect-ratio="375/500"
        @on-index-change="swiperMore"
        class="swiperBox"
      ></swiper>
      <div class="Badge">{{swiperIndex+1}} / {{bannerList.length}}</div>
    </div>
    <!-- 产品介绍 -->
    <div class="productBox">
      <div class="money">
        ￥
        <span>{{product.money}}</span>
      </div>
      <router-link to class="userVip flex">
        <img src="../assets/images/super-1128.gif" alt />
        <div class="text">SUPER会员预计返价值30.86元云钻</div>
        <div class="go flex">
          <p>立即开通</p>
        </div>
      </router-link>
      <div class="provide flex">
        <div class="provideTag">包邮</div>
        <div class="provideTag">保税</div>
        <x-icon type="ios-information-outline" size="20" style="fill:#BBB;" @click="taxPOP=true"></x-icon>
      </div>
      <div class="productTag clearfix">
        <div class="tagItem" v-for="(item,index) in product.tags">{{item}}</div>
      </div>
      <div class="productTitle flex_sb">
        <div class="titleBox">
          <span v-if="product.source" class="source">{{product.source}}</span>
          <span class="title">{{product.title}}</span>
        </div>
        <div class="concern">
          <img
            v-if="concernStatus"
            src="../assets/images/favrite.png"
            alt
            @click="concernStatus=!concernStatus"
          />
          <img v-else src="../assets/images/favrited.png" alt @click="concernStatus=!concernStatus" />
        </div>
      </div>
      <div class="point">
        <span>【【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙】</span>
        <div>{{product.point}}</div>
      </div>
    </div>
    <!-- 国际 -->
    <div class="cell flex international" @click="gjPOP=true">
      <div class="label">
        <img src="../assets/images/oversea-logo.png" alt />
      </div>
      <div class="content">海外正品 · 售后无忧</div>
      <div class="right flex">
        <div class="guide"></div>
        <x-icon type="ios-arrow-right" size="22" style="fill:#bbb;"></x-icon>
      </div>
    </div>
    <!-- 优惠 -->
    <div class="infoContaine">
      <!-- 优惠 -->
      <div class="cell flex discounts" @click="yhPOP=true">
        <div class="label">优惠</div>
        <div class="content">
          <div class="title">
            参加以下活动，预计可省
            <span>10</span>元
          </div>
          <div class="title">
            <div class="titleTag">云钻促销</div>普通会员立返231云钻
          </div>
          <div class="title">
            <div class="titleTag">实名领券</div>实名认证领10元支付券
          </div>
        </div>
        <div class="right flex">
          <div class="guide">领券</div>
          <x-icon type="ios-arrow-right" size="22" style="fill:#bbb;"></x-icon>
        </div>
      </div>
    </div>
    <!-- 刮券 -->
    <div class="cell flex scratchOff" @click="gqPOP=true">
      <div class="label">刮券</div>
      <div class="content">100%刮中券，最高50元无敌券</div>
      <div class="right flex">
        <div class="guide"></div>
        <x-icon type="ios-arrow-right" size="22" style="fill:#bbb;"></x-icon>
      </div>
    </div>
    <!-- 配置 -->
    <div class="allocation">
      <!-- 产品参数 -->
      <div class="cell flex config" @click="pzPOP=true">
        <div class="label">已选</div>
        <div class="content">WF-1000XM3 铂金银 1件</div>
        <div class="right flex">
          <div class="guide"></div>
          <x-icon type="ios-arrow-right" size="22" style="fill:#bbb;"></x-icon>
        </div>
      </div>
      <!-- 配送地址 -->
      <div class="cell flex address" @click="dzPOP=true">
        <div class="label">送至</div>
        <div class="content">{{config.address}}</div>
        <div class="right flex">
          <div class="guide"></div>
          <x-icon type="ios-arrow-right" size="22" style="fill:#bbb;"></x-icon>
        </div>
      </div>
      <!-- 配送地址 -->
      <div class="cell flex">
        <div class="label">运费</div>
        <div class="content">免运费</div>
        <div class="right flex">
          <x-icon type="ios-arrow-right" size="22" style="fill:#bbb;"></x-icon>
        </div>
      </div>
      <!-- 基础服务 -->
      <div class="cell flex default" @click="jcPOP=true">
        <div class="content flex">
          <div class="support">店铺发货&售后</div>
          <div class="support">闪电发货</div>
          <div class="nonsupport">不支持无忧退</div>
        </div>
        <div class="right flex">
          <x-icon type="ios-arrow-right" size="22" style="fill:#bbb;"></x-icon>
        </div>
      </div>
    </div>
    <!-- 评价 -->
    <div class="evaluateBox">
      <div class="cell flex">
        <div class="content">评价（20+）</div>
        <div class="right flex">
          <div class="guide">100%好评率</div>
          <x-icon type="ios-arrow-right" size="22" style="fill:#bbb;"></x-icon>
        </div>
      </div>
      <div class="evaluateList">
        <div class="evaluateitem">
          <div class="title flex">
            <img src="../assets/images/0000000000_01.jpg" alt />
            <div class="name">153****1231</div>
            <rater
              v-model="product.evaluate[0].star"
              :font-size="20"
              :margin="1"
              disabled
              class="star"
            ></rater>
          </div>
          <div class="explain">不错不错 挺好用 音质可以</div>
          <div class="pic">
            <img src="../assets/images/156939384936042029.jpg" alt />
            <img src="../assets/images/156939384936042029.jpg" alt />
            <img src="../assets/images/156939384936042029.jpg" alt />
          </div>
        </div>
        <router-link to class="evaluateMore">查看全部评价</router-link>
      </div>
    </div>
    <!-- 店铺 -->
    <router-link to class="cell flex shopBox">
      <div class="label">
        <img src="../assets/images/vip.png" alt />
      </div>
      <div class="content">索尼官方旗舰店</div>
      <div class="right flex">
        <div class="btn">全部商品</div>
      </div>
    </router-link>
    <!-- 店铺推荐、猜你喜欢 -->
    <tab class="guesstab" active-color="#fad222">
      <tab-item selected @on-item-click="guesstabClick">店铺推荐</tab-item>
      <tab-item @on-item-click="guesstabClick">猜你喜欢</tab-item>
    </tab>
    <div class="recommendBox">
      <swiper :aspect-ratio="375/275" dots-position="center">
        <swiper-item class="black">
          <ul class="likeUl clearfix">
            <li v-for="(item,index) in guessList" :key="index">
              <router-link to="goodsInfo" class="linkBox">
                <img :src="item.img" alt />
                <div class="content">
                  <div class="title">{{item.title}}</div>
                  <div class="tag flex">
                    <div
                      class="tagItem"
                      :class="item2=='自营'?'zy':''"
                      v-for="(item2,index2) in item.tags"
                      :key="index2"
                    >{{item2}}</div>
                  </div>
                  <div class="footer flex">
                    <div class="money">￥{{item.money}}</div>
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
        </swiper-item>
        <swiper-item class="black">
          <ul class="likeUl clearfix">
            <li v-for="(item,index) in guessList" :key="index">
              <router-link to="goodsInfo" class="linkBox">
                <img :src="item.img" alt />
                <div class="content">
                  <div class="title">{{item.title}}</div>
                  <div class="tag flex">
                    <div
                      class="tagItem"
                      :class="item2=='自营'?'zy':''"
                      v-for="(item2,index2) in item.tags"
                      :key="index2"
                    >{{item2}}</div>
                  </div>
                  <div class="footer flex">
                    <div class="money">￥{{item.money}}</div>
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
        </swiper-item>
        <swiper-item class="black">
          <ul class="likeUl clearfix">
            <li v-for="(item,index) in guessList" :key="index">
              <router-link to="goodsInfo" class="linkBox">
                <img :src="item.img" alt />
                <div class="content">
                  <div class="title">{{item.title}}</div>
                  <div class="tag flex">
                    <div
                      class="tagItem"
                      :class="item2=='自营'?'zy':''"
                      v-for="(item2,index2) in item.tags"
                      :key="index2"
                    >{{item2}}</div>
                  </div>
                  <div class="footer flex">
                    <div class="money">￥{{item.money}}</div>
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
        </swiper-item>
      </swiper>
    </div>
    <!-- 图文详情、规格、答疑Tab -->
    <tab class="contentTab" active-color="#fad222">
      <tab-item selected @on-item-click="contentTabClick">图文详情</tab-item>
      <tab-item @on-item-click="contentTabClick">规格参数</tab-item>
      <tab-item @on-item-click="contentTabClick">苏宁国际答疑</tab-item>
    </tab>
    <!-- 图文详情-->
    <div v-if="contentTabIndex==0" class="picInfoBox">
      <img v-for="(item,index) in product.picInfo" :key="index" :src="item" alt />
    </div>
    <!-- 参数规格 -->
    <div v-if="contentTabIndex==1" class="configBox">
      <group>
        <div v-for="(item,index) in product.configs" :key="index">
          <cell
            :title="item.title"
            is-link
            :arrow-direction="configCell==index ? 'up' : 'down'"
            :border-intent="false"
            @click.native="configCell = index"
          ></cell>
          <div v-if="configCell==index" class="content">
            <div v-for="(item2,index2) in item.list" :key="index2" class="cellList">
              <h5>{{item2.title}}</h5>
              <ul>
                <li v-for="(item3,index3) in item2.innerList" :key="index3">
                  <div class="label">{{item3.label}}</div>
                  <div class="cont">{{item3.cont}}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </group>
    </div>
    <!-- 国际答疑 -->
    <div class="mentoring">
      <div v-if="contentTabIndex==2" class="configBox">
        <group>
          <div v-for="(item,index) in product.mentoring" :key="index">
            <cell
              :title="item.title"
              is-link
              :arrow-direction="mentoringCell==index ? 'up' : 'down'"
              :border-intent="false"
              @click.native="mentoringCell = index"
            ></cell>
            <div v-if="mentoringCell==index" class="content">
              <div>{{item.content}}</div>
            </div>
          </div>
        </group>
      </div>
    </div>
    <!-- 看了又看 -->
    <div class="like">
      <divider style="padding: 20px 80px;font-size:18px;">看了又看</divider>
      <ul class="likeUl clearfix">
        <li v-for="(item,index) in likeList" :key="index">
          <router-link to="goodsInfo" class="linkBox">
            <img :src="item.img" alt />
            <div class="content">
              <div class="title">{{item.title}}</div>
              <div class="tag flex">
                <div
                  class="tagItem"
                  :class="item2=='自营'?'zy':''"
                  v-for="(item2,index2) in item.tags"
                  :key="index2"
                >{{item2}}</div>
              </div>
              <div class="footer flex">
                <div class="money">￥{{item.money}}</div>
                <div class="evaluate">{{item.evaluate}}+评论</div>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <divider style="padding: 10px 40px;font-size:14px;">我也是有底线的</divider>
    <!-- 底部导航 -->
    <div class="footerBox flex_sb">
      <div class="leftBox flex">
        <router-link to class="leftItem">
          <img src="../assets/images/action-service.png" alt />
        </router-link>
        <router-link to class="leftItem">
          <img src="../assets/images/action-shop.png" alt />
        </router-link>
        <router-link to class="leftItem">
          <img src="../assets/images/action-cart.png" alt />
        </router-link>
      </div>
      <div class="rightBox flex" @click="pzPOP=true">
        <div class="ticket">领券购买</div>
        <div class="cart">加入购物车</div>
      </div>
    </div>
    <!-- 包税pop -->
    <popup v-model="taxPOP" class="taxBox" height="60%" is-transparent>
      <div class="popupIn">
        <div class="popupTitle">
          费用说明
          <x-icon type="ios-close-empty" size="30" class="popupClose" @click="taxPOP=false"></x-icon>
        </div>
        <div class="taxContent">
          <p>1、该商品已包税，若配送期间产生税费请先行缴纳后，联系客服报销</p>
          <p>2、进口税计算：进口税=商品完税价格（包括运费）*税率（完税价格由海关最终认定）</p>
          <p>3、单笔交易总金额超过5000元，个人年度交易总金额超过26000元，将按一般贸易方式全额征税。</p>
        </div>
      </div>
    </popup>
    <!-- 苏宁国际pop -->
    <popup v-model="gjPOP" class="gjBox" height="60%" is-transparent>
      <div class="popupIn">
        <div class="popupTitle">
          苏宁国际服务
          <x-icon type="ios-close-empty" size="30" class="popupClose" @click="gjPOP=false"></x-icon>
        </div>
        <div class="taxContent">
          <div class="list flex">
            <img src="../assets/images/209116677914137115603716.png" alt />
            <div class="cont">
              <div class="title">海外正品</div>
              <div class="info">苏宁国际承诺该商品为100%海外正品，正品保障，假一赔十，无忧购物</div>
            </div>
          </div>
          <div class="list flex">
            <img src="../assets/images/199793347219617783811965.png" alt />
            <div class="cont">
              <div class="title">售后无忧</div>
              <div class="info">由专业的客服团队为您提供专业的售后服务</div>
            </div>
          </div>
        </div>
      </div>
    </popup>
    <!-- 优惠pop -->
    <popup v-model="yhPOP" class="yhBox" height="60%" is-transparent>
      <div class="popupIn">
        <div class="popupTitle">
          优惠
          <x-icon type="ios-close-empty" size="30" class="popupClose" @click="yhPOP=false"></x-icon>
        </div>
        <div class="taxContent">
          <div class="title">
            参加以下活动，预计可省
            <span>10</span>元
          </div>
          <div class="title">
            <div class="titleTag">云钻促销</div>普通会员立返231云钻
          </div>
          <div class="title">
            <div class="titleTag">实名领券</div>实名认证领10元支付券
          </div>
          <div class="quanList flex_sb">
            <img src="../assets/images/quan-got2.png" alt class="quanImg" />
            <div class="detail">
              <p class="price">
                <i>¥</i>
                <span class="price-num">5.00</span>
              </p>
              <p class="time">有效期：2020.01.13-2020.03.01</p>
              <p class="condition">满7000用200</p>
            </div>
            <div class="gain">
              <router-link to class="goUse">去使用</router-link>
            </div>
          </div>
          <div class="quanList flex_sb">
            <img src="../assets/images/quan.png" alt class="quanImg" />
            <div class="detail">
              <p class="price">
                <i>¥</i>
                <span class="price-num">5.00</span>
              </p>
              <p class="time">有效期：2020.01.13-2020.03.01</p>
              <p class="condition">满7000用200</p>
            </div>
            <div class="gain">
              <span class="btn">立即获取</span>
            </div>
          </div>
          <div class="quanList flex_sb">
            <img src="../assets/images/quan.png" alt class="quanImg" />
            <div class="detail">
              <p class="price">
                <i>¥</i>
                <span class="price-num">5.00</span>
              </p>
              <p class="time">有效期：2020.01.13-2020.03.01</p>
              <p class="condition">满7000用200</p>
            </div>
            <div class="gain">
              <span class="btn">立即获取</span>
            </div>
          </div>
        </div>
      </div>
    </popup>
    <!-- 刮惠pop -->
    <popup v-model="gqPOP" class="gqBox" height="30%" is-transparent>
      <div class="popupIn">
        <div class="popupTitle">
          刮券
          <x-icon type="ios-close-empty" size="30" class="popupClose" @click="gqPOP=false"></x-icon>
        </div>
        <div class="taxContent">
          <div class="title">
            我的云钻
            <span>10</span>
          </div>

          <div class="quanList flex_sb">
            <img src="../assets/images/newdefaultquancur.png" alt class="quanImg" />
            <div class="detail">
              <p class="price">
                <span class="price-num">云钻挂券</span>
                最高50元无敌券
              </p>
              <p class="my">我的云钻：10</p>
            </div>
            <div class="gain">
              <div>剩余次数：3</div>
              <span class="goUse">立即获取</span>
            </div>
          </div>
        </div>
      </div>
    </popup>
    <!-- 地址pop -->
    <popup v-model="dzPOP" class="dzBox" height="60%" is-transparent>
      <div class="popupIn">
        <div class="popupTitle">
          选择城市
          <x-icon type="ios-close-empty" size="30" class="popupClose" @click="dzPOP=false"></x-icon>
        </div>
        <div class="taxContent">
          <group>
            <radio :options="user.address" v-model="config.address" @on-change="addressPOP"></radio>
          </group>
        </div>
      </div>
    </popup>
    <!-- 基础pop -->
    <popup v-model="jcPOP" class="jcBox" height="60%" is-transparent>
      <div class="popupIn">
        <div class="popupTitle">
          基础服务
          <x-icon type="ios-close-empty" size="30" class="popupClose" @click="jcPOP=false"></x-icon>
        </div>
        <div class="taxContent">
          <div class="list flex">
            <img src="../assets/images/oversea-service-shop.png" alt />
            <div class="cont">
              <div class="title">店铺发货&售后</div>
              <div class="info">由“HK国际海外专营店”销售和发货，并提供售后服务</div>
            </div>
          </div>
          <div class="list flex">
            <img src="../assets/images/134922658181547157721000.png" alt />
            <div class="cont">
              <div class="title">闪电发货</div>
              <div class="info">除预订及其他另约的发货情况外，我们将在您付款后次日起的3个工作日内发货，如未按时发货可联系客服申请赔付</div>
            </div>
          </div>
          <div class="list flex">
            <img src="../assets/images/189730626717853111414227.png" alt />
            <div class="cont">
              <div class="title">不支持无忧退</div>
              <div class="info">不支持7天无理由退货</div>
            </div>
          </div>
        </div>
      </div>
    </popup>
    <!-- 商品配置pop -->
    <popup v-model="pzPOP" class="pzBox" height="500px" is-transparent>
      <div class="popupIn">
        <div class="taxContent">
          <div class="headBox flex">
            <x-icon type="ios-close-empty" size="30" class="popupClose" @click="pzPOP=false"></x-icon>
            <div class="imgBox">
              <img src="../assets/images/K-YqKgBJgNkeGJlPzKtwTw.jpg" alt />
            </div>
            <div class="cont">
              <p class="money">￥{{product.money}}</p>
              <p class="shopNum">商家编号:102132154131</p>
              <p class="title">{{product.title}}</p>
            </div>
          </div>
          <div class="innerBox">
            <div class="configBox">
              <div class="title">颜色</div>
              <div class="configList clearfix">
                <div
                  v-for="(item,index) in product.model"
                  class="listItem"
                  :class="index == modelIndex?'active':''"
                  @click="modelClick(index,item)"
                >
                  <img :src="item.img" alt />
                  <span>{{item.cont}}</span>
                </div>
              </div>
            </div>
            <group class="countBox">
              <cell title="数量">
                <inline-x-number style="display:block;" v-model="config.goodsNum" :min="1" width="50px" button-style="round"></inline-x-number>
              </cell>
            </group>
          </div>
          <div class="btnBox flex">
            <div class="ticket" @click="payNow">立即购买</div>
            <div class="cart" @click="addCartClick">加入购物车</div>
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import { XHeader, Swiper, SwiperItem, XDialog, Popup, Rater, Tab, TabItem, Divider, Cell, Group, Radio, InlineXNumber, Toast } from "vux";
export default {
  components: {
    XHeader,
    Swiper,
    SwiperItem,
    XDialog,
    Popup,
    Rater,
    Tab,
    TabItem,
    Divider,
    Cell,
    Group,
    Radio,
    InlineXNumber,
    Toast
  },
  data() {
    return {
      topFixed: false,
      swiperIndex: 0,
      menuNav: false,
      concernStatus: false,
      guessTabIndex: 0,
      contentTabIndex: 0,
      configCell: 0,
      mentoringCell: -1,
      bannerList: [
        {
          url: 'javascript:',
          img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
          title: ''
        },
        {
          url: 'javascript:',
          img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
          title: ''
        },
        {
          url: 'javascript:',
          title: '',
          fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
        }
      ],
      product: {
        money: '1545',
        source: '苏宁国际',
        title: '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
        tags: ['日本品牌', '海外直邮', '跨境商品'],
        point: '【限 时 抢 购】全年抄底价，活动过后恢复原价！ 【晒图有 礼】10字心得+晒图即可获得5元感谢金！（视下 单金额而定） 【放心购】残损补偿，破损包赔，闪电到货，晚到必赔！ 【店铺背景】全程海关国检平台三重监管，香港实体公司经营更加值得信赖！感谢您的支持！',
        evaluate: [
          {
            star: 5,
          }
        ],
        picInfo: [
          require('../assets/images/720562338979054975386562.jpg'),
          require('../assets/images/174960263670128290415496.jpg'),
          require('../assets/images/914416213204022571023932.jpg'),
          require('../assets/images/691905630212266011315978.jpg'),
          require('../assets/images/923138210124072503743731.jpg'),
        ],
        configs: [
          {
            title: '商品参数',
            list: [
              {
                title: '主体参数',
                innerList: [
                  {
                    label: '品牌',
                    cont: '索尼(SONY)',
                  },
                  {
                    label: '型号',
                    cont: ' WF-1000XM3 ',
                  },
                  {
                    label: '颜色',
                    cont: ' 铂金银 ',
                  },
                ]
              }
            ]
          },
          {
            title: '包装清单',
            list: [
              {
                title: '',
                innerList: [
                  {
                    label: '清单',
                    cont: 'X1',
                  },
                ]
              }
            ]
          },
        ],
        mentoring: [
          {
            title: '苏宁国际官方直营和入驻商家销售的海外商品是如何保证商品品质的？',
            content: ' 苏宁国际的商品分为苏宁国际官方直营商品和入驻商户商品两类： （1）苏宁国际官方直营商品由苏宁海外公司专业采购团队从海外采购并向您销售，苏宁海外公司已分别在韩国、美国、日本、香港等地设有采购团队，为您甄选全球好货； （2）苏宁国际平台入驻的商户保证100%官方海外认证海外公司，确保销售资质，通过专业的海外采购公司进行商品采购并向您销售，绝无个人代购行为。苏宁国际与海关跨境电子商务通关管理平台对接，严格遵守跨境电子商务监管政策，保证海外原装正品！所有商品均从大陆以外的国家或地区通过国际物流发出，或从国内保税区发出，请您放心购买。 ',
          },
          {
            title: '为什么有的商品从国内保税仓发货，有的从海外仓发货？',
            content: ' 保税区发货：保税区发货是跨境电商企业与政府部门合作的新一代海淘模式，跨境电商企业从海外直接采购商品，在海关的监控下，批量运入保税区并储存在保税区仓库100%正品保障。用户完成下单后，商品直接从国内保税区仓库用国内快递寄出。保税区发货，让您享受更优惠的商品价格，同时享受到国内的物流时效体验； 海外仓发货：为保证用户能在苏宁国际买到理想、优质的海外商品，苏宁国际直接与海外品牌方或其授权的经销商合作，在海外仓直接发货，送至用户手中，从而避免了源头不清和中间环节转手。苏宁国际精选海外优质品牌，所有商品均由拥有海外经营资质的商家认证的商家提供，100%正品保证； ',
          },
        ],
        // 型号
        model: [
          {
            img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.jpg'),
            cont: 'WH-1000XM3白色'
          },
          {
            img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.jpg'),
            cont: 'WH-1000XM3黑色'
          },
          {
            img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.jpg'),
            cont: 'WH-1000XM3红色'
          },
        ]
      },
      user: {
        address: ['北京市 海淀区 知春路 盈都大厦', '上海 浦东新区 宁静路']
      },
      // 用户勾选配置
      config: {
        address: '北京市 海淀区 知春路 盈都大厦',
        model: '',
        goodsNum: 1,
      },
      guessList: [
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title: '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10',],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10',],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10',],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title: '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        },
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title: '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        },
      ],
      likeList: [
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title: '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10',],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10',],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title: '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        },
      ],
      taxPOP: false,
      gjPOP: false,
      yhPOP: false,
      gqPOP: false,
      dzPOP: false,
      jcPOP: false,
      pzPOP: false,
      modelIndex: 0,
    }
  },
  mounted() {
    window.scrollTo(0, 0)
    document.querySelector('body').setAttribute('style', 'background-color:#f2f2f2')
    document.addEventListener('scroll', (e) => {
      let Wheight = window.screen.height
      let top = e.srcElement.scrollingElement.scrollTop;    // 获取页面滚动高度
      if (Wheight - top <= 200) {
        this.topFixed = true
      } else {
        this.topFixed = false
      }
    })
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    // 轮播图索引
    swiperMore(index) {
      this.swiperIndex = index
    },
    // 头部回退
    goBack() {
      this.$router.back()
    },
    // 店铺推荐猜你喜欢
    guesstabClick(index) {
      this.guessTabIndex = index
    },
    contentTabClick(index) {
      this.contentTabIndex = index
    },
    // 选址地址
    addressPOP(value, label) {
      this.config.address = value
      this.dzPOP = false
    },
    // 选择型号
    modelClick(index, data) {
      this.modelIndex = index
      this.config.model = data
    },
    // 立即购买
    payNow() {
      this.$vux.toast.text('立即支付', 'middle')
      this.pzPOP = false
    },
    // POP加入购物车
    addCartClick() {
      this.$vux.toast.text('已加入购物车', 'middle')
      this.pzPOP = false
    }
  },
}
</script>

<style lang="less" scoped>
.goodsInfoBox {
  font-size: 24px;
  padding-bottom: 100px;
  // 头部导航
  /deep/.headerBox {
    z-index: 9;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
      margin: 0 100px;
    }
    .headLeft {
      img {
        width: 60px;
        margin-top: -16px;
      }
    }
    .headRight {
      img {
        width: 60px;
        margin-top: -16px;
      }
    }
    .hotHint {
      width: 450px;
      margin-top: 15px;
    }
  }
  .active.headerBox {
    position: sticky;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  // 头部菜单弹框
  .menuNavBox {
    .closeBox {
      text-align: right;
      margin-top: 10px;
      margin-right: 30px;
      img {
        width: 60px;
      }
    }
    .menuContent {
      margin: 20px;
      padding: 20px;
      border-radius: 20px;
      background-color: #fff;
      position: relative;
      &::before {
        border-bottom: 20px solid #fff;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        display: block;
        content: '';
        position: absolute;
        top: -20px;
        right: 24px;
      }
      .menuTitle {
        font-size: 30px;
        padding: 20px;
        text-align: left;
      }
      .menuList {
        .menuItem {
          float: left;
          width: 23%;
          margin: 1%;
          background-color: #f7f7f7;
          padding: 20px;
          box-sizing: border-box;
          border-radius: 20px;
          img {
            width: 50%;
          }
          div {
            color: #666;
          }
        }
      }
    }
  }
  // 轮播图
  .bannerBox {
    position: relative;
    .swiperBox {
    }
    .Badge {
      position: absolute;
      right: 20px;
      bottom: 10px;
      padding: 0px 10px;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 24px;
      border-radius: 10px;
    }
  }
  // 产品介绍
  .productBox {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px 0;
    .money {
      color: #f42;
      font-size: 28px;
      font-family: Arial;
      padding: 10px 20px;

      span {
        font-size: 40px;
      }
    }
    .userVip {
      margin: 20px;
      padding: 20px 20px;
      border-radius: 20px;
      background-color: #eee;
      margin-top: -10px;
      font-weight: bold;

      img {
        width: 40px;
        height: 40px;
      }
      .text {
        margin-left: 20px;
        font-size: 28px;
      }
      .go {
        font-size: 28px;
        margin-left: auto;
      }
    }
    .provide {
      padding: 0 20px;
      .provideTag {
        padding: 0 6px;
        border-radius: 5px;
        border: 2px solid #ffbb00;
        margin: 10px;
      }
    }
    .productTag {
      padding: 10px 20px;
      .tagItem {
        float: left;
        color: #222;
        padding-right: 20px;
        position: relative;
        &::after {
          content: '';
          display: inline-block;
          width: 2px;
          height: 20px;
          background-color: #ccc;
          margin-left: 20px;
        }
        &:last-child::after {
          content: none;
        }
      }
    }
    .productTitle {
      padding: 10px 20px;
      align-items: end;
      .titleBox {
        line-height: 1.4;
        .source {
          color: #fff;
          background-color: #6e56e8;
          padding: 1px 10px;
          border-radius: 10px;
          margin-right: 10px;
        }
        .title {
          font-size: 32px;
          font-weight: bold;
        }
      }
      .concern {
        img {
          width: 70px;
          margin-top: 10px;
        }
      }
    }
    .point {
      margin: 0 20px;
      padding: 10px;
      background-color: #eee;
      span {
        color: #f42;
      }
      div {
        color: #999;
      }
    }
  }

  // 单元格格式
  .cell {
    background-color: #fff;
    padding: 16px 20px;

    .label {
      font-size: 28px;
      color: #999;
      margin-right: 10px;
    }
    .content {
      font-size: 28px;
    }
    .right {
      margin-left: auto;
      .guide {
        margin-right: 10px;
        color: #999;
      }
    }
  }

  // 国际
  .international {
    margin-bottom: 20px;
    .label {
      img {
        width: 100px;
        margin-top: 10px;
      }
    }
  }
  // 优惠
  .discounts {
    align-items: end;
    .content {
      .title {
        margin-bottom: 10px;
        display: flex;
        span {
          color: #f42;
        }
        .titleTag {
          border-radius: 10px;
          border: 2px solid #ffbb00;
          padding: 0 10px;
          font-size: 24px;
          margin-right: 10px;
        }
      }
    }
  }
  // 刮券
  .scratchOff {
    border-top: 1px solid #eee;
  }
  // 配置
  .allocation {
    margin: 20px 0;
    // 产品参数
    .config {
      .content {
        font-weight: bold;
      }
    }
    // 收货地址
    .address {
    }
    // 基础服务
    .default {
      .content {
        overflow: hidden;
        font-size: 24px;
        .support {
          display: flex;
          align-items: center;
          &::before {
            content: '';
            display: inline-block;
            margin: 0 10px;
            width: 24px;
            height: 24px;
            background-size: 24px 24px !important;
            background: url('/src/assets/images/oversea-service.png') no-repeat
              0 0;
          }
        }
        .nonsupport {
          display: flex;
          align-items: center;
          &::before {
            content: '';
            display: inline-block;
            margin: 0 10px;
            width: 24px;
            height: 24px;
            background-size: 24px 24px !important;
            background: url('/src/assets/images/unsupport-icon-grey.png')
              no-repeat 0 0;
          }
        }
      }
    }
  }
  // 评价
  .evaluateBox {
    background-color: #fff;
    margin: 20px 0;
    .cell {
      .content {
        font-weight: bold;
      }
      .guide {
        color: #000;
      }
    }
    .evaluateList {
      padding: 20px;
      .evaluateitem {
        .title {
          img {
            width: 50px;
            height: 50px;
          }
          .name {
            font-size: 26px;
            font-weight: bold;
            margin-left: 20px;
          }
          .star {
            margin-left: auto;
          }
        }
        .explain {
          font-style: 28px;
          padding: 20px 0;
        }
        .pic {
          img {
            width: 160px;
            height: 160px;
          }
        }
      }
    }
    .evaluateMore {
      text-align: center;
      padding: 6px 40px;
      border: 2px solid #222;
      border-radius: 10px;
      width: 200px;
      display: block;
      margin: 10px auto;
    }
  }
  // 店铺
  .shopBox {
    padding: 30px 20px;
    .label {
      img {
        width: 160px;
        height: 80px;
      }
    }
    .content {
      font-size: 32px;
      font-weight: bold;
    }
    .right {
      .btn {
        background-color: #ffcc00;
        border-radius: 20px;
        padding: 5px 20px;
      }
    }
  }
  //  店铺推荐、猜你喜欢Tab
  /deep/.guesstab {
    margin-top: 20px;
    background-color: #fff;
    .vux-tab {
      margin: 0 200px;
      .vux-tab-item {
        background-size: 100% 0;
      }
      .vux-tab-selected {
        color: #000 !important;
        font-size: 30px;
        font-weight: bold;
      }
    }
  }
  //  店铺推荐、猜你喜欢内容
  .recommendBox {
    background-color: #fff;
    .likeUl {
      list-style: none;
      li {
        float: left;
        width: 32%;
        border-radius: 20px;
        margin-right: 1.8%;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 10px;
        background-color: #fff;
        .linkBox {
          color: currentColor;
        }
        img {
          width: 100%;
        }
        .content {
          .title {
            margin: 10px auto 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
          }
          .tag {
            margin: 10px 0;
            overflow: hidden;
            height: 50px;
            .tagItem {
              border: 2px solid #fb0;
              padding: 0 5px;
              border-radius: 10px;
              margin: 0 10px;
              flex-shrink: 0;
            }
            .zy {
              background-color: #fb0;
            }
          }
          .footer {
            overflow: hidden;
            .money {
              color: #f42;
              font-weight: bold;
              font-size: 30px;
            }
          }
        }
      }
      li:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
  //  图文详情、规格、答疑Tab
  /deep/.contentTab {
    margin-top: 20px;
    background-color: #fff;
    .vux-tab {
      margin: 0 140px;
      .vux-tab-item {
        background-size: 100% 0;
      }
      .vux-tab-selected {
        color: #000 !important;
        font-size: 26px;
        font-weight: bold;
      }
    }
  }
  // 图文详情
  .picInfoBox {
    img {
      width: 100%;
      line-height: 1;
      display: block;
    }
  }
  // 参数规格
  .configBox {
    /deep/.weui-cells {
      margin-top: 0;
    }
    .content {
      color: #909090;
      padding: 20px;
      font-size: 24px;
      .cellList {
        border-top: 1px dashed #eee;
        h5 {
          font-size: 28px;
          color: #000;
          padding: 10px 0;
          font-weight: normal;
        }
        ul {
          list-style: none;
          line-height: 1.8;
          li {
            .label {
              display: inline-block;
              min-width: 300px;
            }
            .cont {
              min-width: 200px;
              display: inline-block;
            }
          }
        }
      }
    }
  }
  /deep/.mentoring {
    .weui-cell {
      align-items: initial;
    }
    .vux-label {
      font-size: 28px;
    }
    .weui-cell__ft {
      margin-left: 20px;
    }
  }
  // 看了又看
  .like {
    .likeTitle {
      img {
        width: 100%;
        margin-top: 20px;
      }
    }
    .likeUl {
      list-style: none;
      padding: 20px;
      li {
        float: left;
        width: 49%;
        border-radius: 20px;
        margin-right: 2%;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 20px;
        background-color: #fff;
        .linkBox {
          color: currentColor;
        }
        img {
          width: 100%;
        }
        .content {
          .title {
            margin: 10px auto 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
          }
          .tag {
            margin: 10px 0;
            .tagItem {
              border: 2px solid #fb0;
              padding: 0 5px;
              border-radius: 10px;
              margin: 0 10px;
            }
            .zy {
              background-color: #fb0;
            }
          }
          .footer {
            .money {
              color: #f42;
              font-weight: bold;
              font-size: 30px;
            }
            .evaluate {
              color: #999;
              margin-left: 20px;
              font-size: 28px;
            }
          }
        }
      }
      li:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
  // 底部导航
  .footerBox {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 0 20px;
    .leftBox {
      width: 45%;
      .leftItem {
        width: 33%;
        display: block;
        img {
          width: 100%;
          display: block;
        }
      }
    }

    .rightBox {
      width: 50%;
      border-radius: 20px;
      overflow: hidden;

      div {
        width: 50%;
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 30px;
      }
      .ticket {
        background-color: #ffcc00;
      }
      .cart {
        background-color: #ff6600;
        color: #fff;
      }
    }
  }
  // popup格式
  .popupIn {
    width: 98%;
    height: 99%;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 5px;
    position: relative;
    overflow: auto;
    .popupTitle {
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      padding: 20px 0;
      border-bottom: 1px solid #eee;
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      background-color: #fff;
      .popupClose {
        position: absolute;
        top: 20px;
        right: 20px;
        fill: #000;
      }
    }
  }
  // 包税POP
  .taxBox {
    .taxContent {
      p {
        color: #999;
        font-size: 28px;
        margin: 20px;
      }
    }
  }
  // 苏宁国际POP
  .gjBox {
    .taxContent {
      padding: 20px;
      .list {
        padding: 20px 0;
        align-items: end;
        img {
          width: 40px;
          margin-right: 10px;
          margin-top: 8px;
        }
        .cont {
          .title {
            font-size: 28px;
          }
          .info {
            color: #999;
          }
        }
      }
    }
  }
  // 优惠
  .yhBox {
    .taxContent {
      padding: 20px;
      .title {
        margin-bottom: 20px;
        display: flex;
        span {
          color: #f42;
        }
        .titleTag {
          border-radius: 10px;
          border: 2px solid #ffbb00;
          padding: 0 10px;
          font-size: 24px;
          margin-right: 10px;
        }
      }
      .quanList {
        align-items: center;
        color: #f50;
        margin: 20px 0;
        position: relative;
        .quanImg {
          width: 100%;
          position: absolute;
          z-index: 0;
        }
        .detail {
          width: 60%;
          z-index: 1;
          padding: 20px 20px 30px;
          .price {
            color: #f50;
            font-size: 28px;
            .price-num {
              font-weight: 600;
              font-size: 60px;
              font-family: impact, serif;
              margin: 0 10px;
            }
          }
        }
        .gain {
          z-index: 1;
          width: 30%;
          text-align: center;
          font-size: 30px;
          .goUse {
            width: 80%;
            display: block;
            color: currentColor;
            box-sizing: border-box;
            margin: 0 auto;
            text-align: center;
            padding: 4px 10px;
            border-radius: 20px;
            border: 2px solid #f50;
          }
        }
      }
    }
  }
  // 刮券POP
  .gqBox {
    .taxContent {
      padding: 20px;
      .title {
        margin-bottom: 20px;
        display: flex;
        span {
          color: #f42;
        }
      }
      .quanList {
        align-items: center;
        color: #fff;
        margin: 20px 0;
        position: relative;
        .quanImg {
          width: 100%;
          position: absolute;
          z-index: 0;
        }
        .detail {
          width: 60%;
          z-index: 1;
          padding: 20px 20px 30px;
          .price {
            font-size: 28px;
            .price-num {
              font-weight: 600;
              font-size: 40px;
              margin: 0 10px;
            }
          }
        }
        .gain {
          z-index: 1;
          width: 30%;
          text-align: center;
          font-size: 26px;
          .goUse {
            width: 80%;
            display: block;
            color: currentColor;
            box-sizing: border-box;
            margin: 0 auto;
            text-align: center;
            padding: 0px 10px;
            border-radius: 20px;
            border: 2px solid #fff;
          }
        }
      }
    }
  }
  // 地址POP
  .dzBox {
    /deep/.weui-cells {
      margin-top: 0;
      &::before {
        content: none;
      }
    }
    .taxContent {
      p {
        color: #999;
        font-size: 28px;
        margin: 20px;
      }
    }
  }
  // 基础服务POP
  .jcBox {
    .taxContent {
      padding: 20px;
      .list {
        padding: 20px 0;
        align-items: end;
        img {
          width: 40px;
          margin-right: 10px;
          margin-top: 8px;
        }
        .cont {
          .title {
            font-size: 28px;
          }
          .info {
            color: #999;
          }
        }
      }
    }
  }
  // 配置POP
  .pzBox {
    .taxContent {
      padding: 0 20px;
      .popupClose {
        position: absolute;
        right: 20px;
        top: 20px;
      }
      .headBox {
        padding: 20px 0;
        border-bottom: 2px solid #eee;
        position: fixed;
        width: 94%;
        background-color: #fff;
        z-index: 5;
        .imgBox {
          border-radius: 20px;
          border: 2px solid #eee;
          margin-top: -80px;
          width: 520px;
          overflow: hidden;
          left: 40px;
          img {
            width: 100%;
          }
        }
        .cont {
          padding-left: 20px;
          box-sizing: border-box;
          .money {
            color: #ff4422;
            font-size: 30px;
          }
          .shopNum {
            color: #999;
          }
          .title {
            height: 115px;
            overflow: hidden;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            text-overflow: ellipsis;
          }
        }
      }
      .innerBox {
        padding-top: 240px;
        overflow: auto;
        height: 640px;
        &::-webkit-scrollbar {
          display: none;
        }
        .configBox {
          .title {
            font-size: 30px;
            padding: 10px 0;
          }
          .configList {
            .listItem {
              border: 2px solid #f5f5f5;
              background: #f6f6f6;
              height: auto;
              line-height: 24px;
              padding: 2px 4px;
              float: left;
              display: flex;
              align-items: center;
              margin: 10px;
              border-radius: 20px;
              padding: 5px 10px;
              box-sizing: border-box;
              overflow: hidden;
              &:active {
                border: 2px solid #fc0;
                background: #ffeda2;
              }
              &.active {
                border: 2px solid #fc0;
                background: #ffeda2;
              }
              img {
                width: 50px;
                height: 50px;
              }
              span {
                margin-left: 10px;
              }
            }
          }
        }
        /deep/.countBox {
          .weui-cell {
            font-size: 30px;
            padding: 20px 0;
          }

          .vux-number-selector {
            border: 2px solid #fc0;
            svg {
              fill: #fc0;
            }
            &.vux-number-disabled {
              svg {
                fill: #ccc;
              }
            }
          }
        }
      }
      .btnBox {
        border-radius: 20px;
        overflow: hidden;
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        background-color: #fff;
        div {
          width: 50%;
          height: 80px;
          line-height: 80px;
          text-align: center;
          font-size: 30px;
        }
        .ticket {
          background-color: #ffcc00;
        }
        .cart {
          background-color: #ff6600;
          color: #fff;
        }
      }
    }
  }
}
</style>